html,
body {
	width: 46.875rem;
	height: 100%;
}

.guide {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.wrap {
	width: 400%;
	height: 100%;
	display: flex;
}
.guide-box {
	position: relative;
	width: 100%;
	height: 100%;
}
.buy {
	background-color: #8be2fe;
}
.best {
	background-color: #ddbefe;
}
.low {
	background-color: #ffcd91;
}
.shop {
	background-color: #bfc2fc;
}
.guide-skip {
	position: absolute;
	top: 3rem;
	right: 6.667%;
	width: 6.25rem;
	height: 3.125rem;
	font-size: 1.5rem;
	font-weight: 400;
	font-family: "Microsoft YaHei";
	color: rgb(255, 255, 255);
	line-height: 1.2;
	border: none;
	border-radius: 1.5625rem;
	background-color: rgb(255, 255, 255, 0.502);
	z-index: 57;
}
.buy-skip {
	box-shadow: 0rem 0.625rem 2rem 0rem rgba(0, 134, 179, 0.1);
}
.best-skip {
	box-shadow: 0rem 0.625rem 2rem 0rem rgba(97, 0, 201, 0.1);
}
.low-skip {
	box-shadow: 0rem 0.625rem 2rem 0rem rgba(199, 109, 0, 0.1);
}
.guide-title {
	font-family: "PingFang";
	color: rgb(255, 255, 255);
	line-height: 1;
	text-align: center;
	margin-top: 12.1875rem;
}
.guide-title p:first-child {
	font-size: 3.125rem;
	margin-bottom: 1.375rem;
}
.guide-title p:last-child {
	font-size: 1.75rem;
	margin-bottom: 3.1875rem;
}

.guide-circular {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 21.375rem;
}
.circular {
	display: flex;
	align-items: center; /*元素垂直居中*/
	justify-content: center; /*元素水平居中*/
	width: 33.75rem;
	height: 33.75rem;
	border-radius: 50%;
	background-color: rgb(255, 255, 255);
}
.circular-buy {
	box-shadow: 0rem 4.0625rem 7.625rem 0rem rgba(0, 125, 166, 0.2);
}
.circular-best {
	box-shadow: 0rem 4.0625rem 7.625rem 0rem rgba(101, 0, 208, 0.2);
}
.circular-low {
	box-shadow: 0rem 4.0625rem 7.625rem 0rem rgba(202, 111, 0, 0.2);
}
.circular-shop {
	box-shadow: 0rem 4.0625rem 7.625rem 0rem rgba(0, 10, 212, 0.2);
}
.buy-img {
	width: 61%;
	height: 60%;
}
.best-img {
	width: 67%;
	height: 64%;
}
.low-img {
	width: 86%;
	height: 82%;
}
.shop-img {
	width: 57%;
	height: 64%;
}

.guide-begin {
	position: absolute;
	bottom: 8rem;
	display: flex;
	justify-content: center;
	width: 100%;
}
.begin {
	display: block;
	width: 22.5rem;
	height: 5rem;
	text-align: center;
	line-height: 5rem;
	box-sizing: border-box;
	border-width: 0.0625rem;
	border-color: rgb(255, 255, 255);
	border-style: solid;
	border-radius: 2.5rem;
	box-shadow: 0rem 0.25rem 0.5rem 0rem rgba(0, 8, 196, 0.3);
	font-family: "PingFang";
	font-size: 1.75rem;
	font-weight: bold;
	color: rgb(255, 255, 255);
	text-shadow: 0rem 0.25rem 0.5rem rgba(0, 8, 196, 0.1);
	margin: 0 auto;
}

.guide-choice {
	position: absolute;
	bottom: 15.5rem;
	left: 36.667%;
	width: 26.667%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.choice.active {
	background-color: rgb(255, 255, 255);
	width: 17.25px;
	height: 9.75px;
	border-radius: 30px;
}
.choice {
	border-radius: 50%;
	background-color: rgb(255, 255, 255);
	opacity: 0.702;
	width: 9.75px;
	height: 9.75px;
	z-index: 63;
}
